<template>
    <div class="exam-paper-info">
        <!-- 试卷 -->
        <el-steps :active="active" finish-status="success" align-center>
            <el-step title="试卷基础信息"></el-step>
            <el-step title="添加判断题"></el-step>
            <el-step title="添加单选题"></el-step>
            <el-step title="添加多选题"></el-step>
        </el-steps>
        <!-- 步骤内容 -->
        <div class="steps-content">
            <exam-paper-base-info :oldInfo="baseInfo" v-show="active == 0" ref="baseInfo"></exam-paper-base-info>
            <add-question v-show="active == 1" :paperId="oldInfo.id" :configInfo="baseInfo" :questionType="1" ref="judgeList"></add-question>
            <add-question v-show="active == 2" :paperId="oldInfo.id" :configInfo="baseInfo" :questionType="2" ref="radioList"></add-question>
            <add-question v-show="active == 3" :paperId="oldInfo.id" :configInfo="baseInfo" :questionType="3" ref="checkboxList"></add-question>
        </div>
        <el-row class="verifyidentity-button">
            <el-button @click.stop="closeFun" round>取消</el-button>
            <el-button v-show="active > 0" type="primary" @click="prevStep" round>上一步</el-button>
            <el-button type="primary" @click="nextStep" round>{{ nextStepName }}</el-button>
        </el-row>
    </div>
</template>
<script>
import { saveOrUpdatePaper } from '@/api/exam'
import ExamPaperBaseInfo from './ExamPaperBaseInfo'
import AddQuestion from './AddQuestion'

export default {
    name: 'ExamPaperInfo',
    props: {
        closeFun: {
            type: Function,
            required: true
        },
        oldInfo: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    components: {
        ExamPaperBaseInfo,
        AddQuestion
    },
    data() {
        return {
            active: 0, // 当前所在步骤
            baseInfo: {}, // 基础信息数据
            judgeList: [], // 判断题数据
            radioList: [], // 单选题数据
            checkboxList: [], // 多选题数据
            nextStepName: '下一步'
        }
    },
    created() {
        if(this.oldInfo && this.oldInfo.id) {
            this.baseInfo = {
                name: this.oldInfo.name,
                remark: this.oldInfo.remark,
                passLine: this.oldInfo.passLine,
                questionConfigStr: this.oldInfo.questionConfigStr
            }
        }
    },
    methods: {
        // 判断跳转配置题型是否在配置项中配置了
        hasThisQuestionType(type) {
            let questionConfig = JSON.parse(this.baseInfo.questionConfigStr)
            let flag = false

            for(let i=0, len=questionConfig.length; i < len; i++) {
                if(type == questionConfig[i].question_type) {
                    flag = true
                    break
                }
            }
            return flag
        },
        // 判断是否为最后一步
        nextIsEnd(type) {
            let questionConfig = JSON.parse(this.baseInfo.questionConfigStr)

            return questionConfig[questionConfig.length - 1].question_type == type
        },
        // 上一步
        prevStep() { 
            for(let i=0, len=this.active; i < len; i++) {
                // 判断题型配置信息中是否含有上一步的题型
                if(this.hasThisQuestionType(this.active-i-1)) {
                    this.active -= (i+1)
                    this.nextStepName = '下一步'
                    return true
                }
            }
            this.active -= 1
        },
        // 下一步
        nextStep() {
            let that = this
            let MapList = {
                0: 'baseInfo',
                1: 'judgeList',
                2: 'radioList',
                3: 'checkboxList'
            }
            let isEnd = true
            let flag = this.$refs[MapList[this.active]].getData() // 获取当前步骤的数据
            
            this.baseInfo = this.$refs.baseInfo.getData()
            if (this.baseInfo) {
                for(let i=0, len=(3-this.active); i < len; i++) {
                    // 先判断题型配置信息中是否含有下一步的题型
                    if(this.hasThisQuestionType(this.active+i+1)) {
                        isEnd = false
                        // 再判断当前步骤是否填写完成
                        if(flag) {
                            this[MapList[this.active]] = flag
                            this.active += (i+1)
                            // 下一步是否为最后一步
                            if(this.nextIsEnd(this.active)) {
                                this.nextStepName = '完成'
                            }
                            return true
                        } else {
                            return false
                        }
                    }
                }
                
                // 已经是最后一步 并且 最后一步填写完成
                if(isEnd && flag) {
                    this.$confirm("确定完成？", '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        roundButton: true
                    }).then(() => {
                        that[MapList[that.active]] = flag
                        // 提交试卷信息
                        let questionIdsList = []
                        // 合并三种题型选择的数据
                        questionIdsList.push.apply(questionIdsList, that.judgeList)
                        questionIdsList.push.apply(questionIdsList, that.radioList)
                        questionIdsList.push.apply(questionIdsList, that.checkboxList)
                        let parames = {
                            id: that.oldInfo.createAccount == '' ? 0 : (that.oldInfo.id || 0),
                            updateAccount: that.$store.state.userinfo.accountName,
                            createAccount: that.oldInfo.createAccount || that.$store.state.userinfo.accountName,
                            questionIds: questionIdsList.join(',')
                        }
                        $.extend(parames, that.baseInfo)
                        // 保存
                        saveOrUpdatePaper(parames).then(res => {
                            if(res.status === 200) {
                                that.$message.success('保存成功')
                                setTimeout(function(){
                                    that.closeFun(true)
                                }, 1000)
                            }
                        })
                    }).catch(() => {

                    })
                }
            }
        }
    }
}
</script>
<style lang="scss">
.exam-paper-info {
    .steps-content {
        padding-top: 20px;
    }
}
</style>
